<template>
  <div>
    <a-descriptions bordered size='small' :column='3'>
      <a-descriptions-item label='单号'>
        {{ orderForm.orderNo }}
      </a-descriptions-item>
      <a-descriptions-item label='制单人'>
        {{ orderForm.nickName }}
      </a-descriptions-item>
      <a-descriptions-item label='发货日期'>
        {{ orderForm.sendDate }}
      </a-descriptions-item>
      <a-descriptions-item label='订单日期'>
        {{ orderForm.createTime }}
      </a-descriptions-item>
      <a-descriptions-item label='部门'>
        {{ orderForm.deptName }}
      </a-descriptions-item>
      <a-descriptions-item label='业务员'>
        {{ orderForm.saleManName }}-{{ orderForm.linkTel }}
      </a-descriptions-item>
      <a-descriptions-item label='供货方'>
        {{ orderForm.supplierName }}
      </a-descriptions-item>
      <a-descriptions-item label='购货方'>
        {{ orderForm.customName }}
      </a-descriptions-item>

      <a-descriptions-item label='供方资信'>
        <a-tag color='#2db7f5' v-if='orderForm.supplierBondType==0'>不垫付</a-tag>
        <a-tag color='purple' v-if='orderForm.supplierBondType==1'>底价</a-tag>
        <a-tag color='purple' v-if='orderForm.supplierBondType==2'>底价+税金</a-tag>
        <a-tag color='purple' v-if='orderForm.supplierBondType==3'>税金</a-tag>
        <a-tag color='purple' v-if='orderForm.supplierBondType==6'>底价/2+税金</a-tag>
        <a-tag color='purple' v-if='orderForm.supplierBondType==5'>全额垫付</a-tag>
        <a-tag color='purple' v-if='orderForm.supplierBondType==8'>销售金额*费率</a-tag>

      </a-descriptions-item>
      <a-descriptions-item label='购方资信'>
        <a-tag color='#2db7f5' v-if='orderForm.customBondType==0'>全款</a-tag>
        <a-tag color='purple' v-if='orderForm.customBondType==1'>底价</a-tag>
        <a-tag color='purple' v-if='orderForm.customBondType==2'>底价+税金</a-tag>
        <a-tag color='purple' v-if='orderForm.customBondType==6'>底价/2+税金</a-tag>
        <a-tag color='purple' v-if='orderForm.customBondType==3'>税金</a-tag>
        <a-tag color='purple' v-if='orderForm.customBondType==5'>全额资信</a-tag>
        <a-tag color='purple' v-if='orderForm.customBondType==7'>预付款</a-tag>
      </a-descriptions-item>

      <a-descriptions-item label='订单状态'>
        <a-tag color='#87d068' v-if='orderForm.orderState==0'>未提交</a-tag>
        <a-tag color='#87d068' v-if='orderForm.orderState==1'>{{ orderForm.taskName }}</a-tag>
        <a-tag color='#f50' v-if='orderForm.orderState==2'>已审批</a-tag>
      </a-descriptions-item>

      <a-descriptions-item label='收款金额'>
        {{ orderForm.takeAmount }}
      </a-descriptions-item>
      <a-descriptions-item label='收款账户'>
        {{ orderForm.bankName }}
      </a-descriptions-item>
      <a-descriptions-item label='收款日期' :span="2">
        {{ orderForm.takeDate }}
      </a-descriptions-item>
      <a-descriptions-item label='备注' :span="3">
        {{ orderForm.remark }}
      </a-descriptions-item>
      <a-descriptions-item label='附件' :span="2">
        <f-images :value='orderForm.orderImage'></f-images>
      </a-descriptions-item>
    </a-descriptions>
    <a-divider orientation='left'>商品信息</a-divider>
    <f-table ref='orderDrugs' :columns='columns1' rowKey='orderDetailsId' :scroll='{x:true}' handler='orderReturnDrugsHandler' :operator='operator' :params='queryParam' :api='api.bod' :autoLoad='false' :showPagination='false' :multiple='false'>
        <span slot='tuihuo' slot-scope='text, record, index'>
          <a-tag color='#87d068' v-if='text==0'>否</a-tag>
           <a-tag color='#f50' v-if='text==1'>已退货</a-tag>
        </span>
      <span slot='action' slot-scope='text, record'>
        <template>
            <a @click='openChaiModal(record)' v-if="record.saleType==1&&record.tuihuo==0">拆分</a>
           <a-divider type="vertical" v-if="record.saleType==1&&record.tuihuo==0&&(record.returnDate==''||record.jiesuanId=='')"/>
            <a @click='openReturnModal(record)' v-if="record.returnDate==''&&record.saleType==1">回款</a>
           <a-divider type="vertical" />
           <!--未回款或者已回款且已审批的可以退货-->
           <a @click="addTuibu(record,2)" v-if="(record.saleType==1&&record.tuihuo==0&&record.returnDate=='')||(record.returnDate!='')">退货</a>
          <a @click='openReturnModal2(record)' v-if="record.returnDate==''&&record.saleType==2">退货单回款</a>
        </template>
       </span>
    </f-table>

    <a-divider orientation='left'>回款信息</a-divider>
    <f-table ref='returnDetails' :columns='columns2' rowKey='returnId' :scroll='{x:true}' :operator='operator' :params='queryParam' :api='api.bod.returnList' :autoLoad='false' :showPagination='false' :multiple='false' >
       <span slot='hkImage' slot-scope='text, record, index'>
          <f-images :value='record.hkImage'></f-images>
        </span>
      <span slot='paymentState' slot-scope='text, record, index'>
            <a-tag color='#87d068' v-if='text===0'>未提交</a-tag>
             <a-tag color='#87d068' v-if='text==1' @click='processImg(record)'>{{ record.taskName }}</a-tag>
           <a-tag color='#f50' v-if='text==2'>已回款</a-tag>
        </span>
      <span slot='action' slot-scope='text,record'>
          <template>
            <a @click='startProcess(record)' v-if='record.paymentState==0&&record.customReturnState==0'>提交审批</a>
            <a @click='completeTask(record)' v-if="record.taskDefinitionKey&&record.taskDefinitionKey=='__initiator__'&&record.customReturnState==0">提交审批</a>
            <a-divider type='vertical' v-if="record.paymentState==0||(record.taskDefinitionKey&&record.taskDefinitionKey=='__initiator__')" />
            <a href='javascript:;' v-if='record.paymentState==1' @click='processImg(record)'>审批进度</a>
            <a href='javascript:;' v-if="(record.paymentState==0||record.taskDefinitionKey=='__initiator__')&&record.customReturnState==0" @click='delReturnDetails(record)'>删除</a>
            <a-divider type="vertical"  v-if='record.paymentState==2'/>
             <a @click='revokeHandle(record)' v-if='record.paymentState==2'>撤销回款</a>
          </template>
     </span>
    </f-table>

    <a-modal title='拆分订单' v-model='chaiModal' v-if='chaiModal' width='800px' height='400px' @cancel='handleChaiCancel' @ok='handleChaiFenSubmit'>
      <f-form ref='chaiForm' :action='api.bod.chaiFen' v-if='chaiModal' :form-key='this.formItem.orderDetailsId'>
        <f-form-item label='拆分方式' type='radio' name='returnType' :required='true' dataType='number' :data='api.busOrder.returnType' :value.sync='formItem.returnType' />
        <f-form-item label='拆分数量' type='number' v-if='formItem.returnType==1' data-type='number' name='returnNum' :required='true' :value='formItem.saleNum-1' :max='formItem.saleNum-1' :min='1' />
        <f-form-item label='拆分金额' type='number' v-if='formItem.returnType==2' data-type='number' name='returnAmount' :required='true' :value='formItem.saleAmount-1' :max='formItem.saleAmount-1' :min='1' />
      </f-form>
    </a-modal>


    <a-modal title='申请回款' v-model='returnModal' v-if='returnModal' width='800px' height='400px' @cancel='handleCancel' @ok='handleSubmit'>
      <f-form ref='returnForm' :action='api.payment' v-if='returnModal' handlerName='huikuanPaymentSaveHandler' :form-key='this.formItem.paymentId' :file-ids='fileIds'>
        <f-form-item label='回款数量' type='number' disabled  data-type='number' name='returnNum'  :value='formItem.saleNum'  />
        <f-form-item label='回款金额' type='number'  disabled data-type='number' name='returnAmount'  :value='formItem.noReturnAmount'  />
        <f-form-item label='回款日期' type='date' name='amountDate' :required='true' :value='formItem.returnDate' />
        <f-form-item label='收款账户' ref='bank' type='select' name='bankId' :value='formItem.bankId' :data='api.bank.list' valueKey='bankId' label-key='bankName' :required='true' />
        <f-form-item label="备注" name="remark" :value="formItem.remark"/>
        <f-form-item label='回款附件' type='upload' name='hkImage' :value='formItem.hkImage' value-type='json' :file-max='3' @uploadSuccess='uploadSuccess' />
      </f-form>
    </a-modal>


    <a-modal title='申请退货回款' v-model='returnModal2' v-if='returnModal2' width='800px' height='400px' @cancel='handleCancel2' @ok='handleSubmit2'>
      <f-form ref='returnForm2' :action='api.payment' v-if='returnModal2' handlerName='tuiHuoPaymentSaveHandler' :form-key='this.formItem.paymentId' :file-ids='fileIds'>
        <f-form-item label='回款数量' type='number' disabled  data-type='number' name='returnNum'  :value='formItem.saleNum'  />
        <f-form-item label='回款金额' type='number'  disabled data-type='number' name='returnAmount'  :value='formItem.noReturnAmount'  />
        <f-form-item label='回款日期' type='date' name='amountDate' :required='true' :value='formItem.returnDate' />
      </f-form>
    </a-modal>

    <a-modal :title="'商品'+title+'申请'" v-model="detailsModal" v-if="detailsModal" width="650px" height="400px" @cancel="tuiHandleCancel" @ok="tuiHandleSubmit">
      <f-form ref="tuibuForm" :action="api.bod.addOrderDetails" v-if="detailsModal" :form-key="this.tuiFormItem.orderDetailsId">
        <f-form-item :label="title+'数量'" type="number" data-type="number" name="saleNum" :required="true" :disabled='true' :value="tuiFormItem.saleNum" :max="tuiFormItem.saleNum"/>
        <f-form-item :label="title+'日期'" type="date" name="saleDate" :value="tuiFormItem.saleDate"/>
      </f-form>
    </a-modal>

    <process-image ref='processImg' v-if='processImageVisible' :visible.sync='processImageVisible' :processInstanceId='processInstanceId'></process-image>
  </div>

</template>

<script>
import api from "./js/api"
import ProcessImage from "../../flowable/process/process_image"

export default {
  name: "OrderReturnDrugs",
  components: { ProcessImage },
  data() {
    let me = this
    //操作按钮
    let operator = []
    return {
      api: Object.assign(api, this.api),
      //列表初始化查询参数
      queryParam: {},
      processImageVisible: false,
      supplierId: "",
      returnType: 1,
      saleType: '',
      order: {},
      fileIds: [],//上传文件ID
      returnModal: false,
      returnModal2: false,
      chaiModal: false,
      formItem: this.getFormItem(),
      tuiFormItem: this.getTuiFormItem(),
      orderForm: {},
      detailsModal: false,
      operator: operator,
      columns1: [],
      columns2: []
    }
  },
  created() {
  },
  computed: {
    title: function() {
      return this.saleType == 2 ? '退货' : '补货'
    }
  },
  methods: {
    getTuiFormItem() {
      return {
        orderDetailsId: '',
        saleDate: '',
        saleNum: ''
      }
    },
    getFormItem() {
      return {
        returnId: "",
        saleNum: 0,
        noReturnNum: 0,
        returnType: 0,
        noReturnAmount: "",
        sendDate: "",
        hkImage: []
      }
    },
    getColumns1() {
      let columns = []
      let title = "回款金额"
      if (this.order.customBondType == 7) {
        title = "预付款金额"
      }
      let column1 = [{
        title: "商品名称",
        align: "center",
        ellipsis: true,
        width: "180px",
        dataIndex: "drugsName"
      }, {
        title: "规格",
        align: "center",
        width: "80px",
        dataIndex: "drugsSpec"
      }, {
        title: "批号",
        align: "center",
        width: "80px",
        dataIndex: "drugsLotNo"
      }, {
        title: "数量",
        align: "center",
        width: "80px",
        dataIndex: "saleNum"
      }, {
        title: "单价",
        align: "center",
        width: "80px",
        dataIndex: "salePrice"
      }, {
        title: "销售金额",
        align: "center",
        width: "80px",
        dataIndex: "saleAmount"
      }, {
        title: "资保金金额",
        align: "center",
        width: "80px",
        dataIndex: "customBondAmount"
      }, {
        title: '预付款',
        align: "center",
        width: "80px",
        dataIndex: "customYsk"
      }, {
        title: '回款金额',
        align: "center",
        width: "80px",
        dataIndex: "returnAmount"
      }, {
        title: '回款日期',
        align: "center",
        width: "80px",
        dataIndex: "returnDate"
      }, {
        title: '是否退货',
        align: "center",
        width: "80px",
        dataIndex: "tuihuo",
        scopedSlots: { customRender: "tuihuo" }
      },{
        title: "操作",
        align: "center",
        width: "80px",
        scopedSlots: { customRender: "action" }
      }]
      return Object.assign(columns, column1)
    },
    getColumns2() {
      let columns = []
      let column1 = [{
        title: "药品名称",
        align: "center",
        dataIndex: "drugsName"
      }, {
        title: "规格",
        align: "center",
        dataIndex: "drugsSpec"
      },{
        title: "回款数量",
        align: "center",
        dataIndex: "saleNum"
      }, {
        title: "回款金额",
        align: "center",
        dataIndex: "amount"
      },  {
        title: "回款账户",
        align: "center",
        dataIndex: "bankName"
      }, {
        title: "回款日期",
        align: "center",
        dataIndex: "amountDate"
      }, {
        title: "回款状态",
        align: "center",
        dataIndex: "paymentState",
        scopedSlots: { customRender: "paymentState" }
      }, {
        title: "附件",
        align: "center",
        dataIndex: "hkImage",
        scopedSlots: { customRender: "hkImage" }
      }, {
        title: "备注",
        align: "center",
        ellipsis: true,
        dataIndex: "remark"
      },{
        title: "操作",
        align: "center",
        scopedSlots: { customRender: "action" }
      }]

      return Object.assign(columns, column1)
    },
    setData(data) {
      if (data && data.orderId) {
        let params = {
          orderId: data.orderId,
          handlerName: "orderGetHandler"
        }
        this.http.get(this, {
          url: this.api.busOrder.get,
          params: params,
          success: function(me, data) {
            me.orderForm = data
            me.loaded = true
          }
        })
        this.queryParam.orderId = data.orderId
        this.supplierId = data.supplierId
        this.order = data
        this.columns1 = this.getColumns1()
        this.columns2 = this.getColumns2()
        this.$refs["orderDrugs"].refresh(false)
        this.$refs["returnDetails"].refresh(false)
      }
    },
    openReturnModal(record) {
      this.$set(record, "returnType", 1)
      this.formItem = record
      this.returnModal = true
    },
    openReturnModal2(record) {
      this.$set(record, "returnType", 1)
      this.formItem = record
      this.returnModal2 = true
    },
    openChaiModal(record) {
      this.$set(record, "returnType", 1)
      this.formItem = record
      this.chaiModal = true
    },
    //文件上传回调
    uploadSuccess(fileUrl, files, fileIds) {
      this.fileIds = fileIds
    },
    handleSubmit() {
      let params = {
        orderId: this.queryParam.orderId,
        orderDetailsId: this.formItem.orderDetailsId,
        yfkAmount: this.formItem.returnAmount
      }
      this.$refs["returnForm"].submit(params, this.handleSuccess)
    },
    handleSubmit2() {
      let params = {
        orderId: this.queryParam.orderId,
        orderDetailsId: this.formItem.orderDetailsId,
      }
      this.$refs["returnForm2"].submit(params, this.handleSuccess2)
    },
    handleChaiFenSubmit() {
      let params = {
        orderId: this.queryParam.orderId,
        orderDetailsId: this.formItem.orderDetailsId,
      }
      this.$refs["chaiForm"].submit(params, this.handleChaiSuccess)
    },
    //删除回款
    delReturnDetails(record) {
      this.http.confirm(this, {
        content: "确认删除吗?",
        url: api.payment.remove,
        data: {
          handlerName:'huikuanPaymentDeleteHandler',
          processInstanceId:record.processInstanceId,
          ids: record.returnId
        },
        success: function(me, data) {
          me.$refs["orderDrugs"].refresh()
          me.$refs["returnDetails"].refresh(false);
        }
      })
    },
    handleSuccess() {
      this.$refs["orderDrugs"].refresh()
      this.$refs["returnDetails"].refresh(false)
      this.returnModal = false
    },
    handleSuccess2() {
      this.$refs["orderDrugs"].refresh()
      this.$refs["returnDetails"].refresh(false)
      this.returnModal2 = false
    },
    handleChaiSuccess() {
      this.$refs["orderDrugs"].refresh()
      this.chaiModal = false
    },
    handleChaiCancel() {
      this.chaiModal = false
    },
    handleCancel() {
      this.returnModal = false
    },
    handleCancel2() {
      this.returnModal2 = false
    },
    processImg(order) {
      this.processInstanceId = order.processInstanceId
      this.processImageVisible = true
    },
    //重新提交
    completeTask(paymentId) {
      this.http.confirm(this, {
        content: "确认提交审批吗?",
        url: api.tasktodo.complete,
        requestBody: true,
        data: {
          taskId: paymentId.taskId
        },
        success: function(me, data) {
          me.$refs.table.refresh()
        }
      })
    },
    startProcess(order) {
      this.http.confirm(this, {
        content: "确认提交审批吗?",
        url: api.processInstance.start,
        requestBody: true,
        data: {
          handlerName: "paymentHuikuanStartProcessHandler",
          businessKey: order.returnId
        },
        success: function(me, data) {
          me.$refs.returnDetails.refresh()
        }
      })
    },
    revokeHandle(order) {
      this.http.confirm(this, {
        content: "确认撤销回款吗?",
        url: api.bod.revoke,
        data: {
          returnId: order.returnId
        },
        success: function(me, data) {
          me.$refs.returnDetails.refresh()
        }
      })
    },
    addTuibu(record, saleType) {
      this.tuiFormItem = record
      this.saleType = saleType
      if (saleType == 3) {
        this.$nextTick(() => {
          if (this.tuiFormItem.saleNum < 0) {
            this.tuiFormItem.saleNum = this.tuiFormItem.saleNum * -1
          }
        })
      }
      this.detailsModal = true
    },
    deleteTuibu(record) {
      this.http.confirm(this, {
        content: '确认删除吗?',
        url: api.bod.deleteTuibu,
        data: {
          orderDetailsId: record.orderDetailsId
        },
        success: function(me, data) {
          me.$refs['orderDrugs'].refresh()
        }
      })
    },
    tuiHandleSubmit() {
      let params = {
        orderDetailsId: this.tuiFormItem.orderDetailsId,
        saleNum:this.tuiFormItem.saleNum,
        saleType: this.saleType
      }
      this.$refs['tuibuForm'].submit(params, this.tuiHandleSuccess)
    },
    tuiHandleSuccess() {
      this.$refs['orderDrugs'].refresh()
      this.detailsModal = false
    },
    tuiHandleCancel() {
      this.detailsModal = false
    }
  }
}
</script>